<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="./vue.global.js"></script>
    <link rel="stylesheet" href="./index.css" />
    <link rel="stylesheet" href="./table.css" />
    <link rel="stylesheet" href="./pugong.css" />
    <link rel="stylesheet" href="./utils.css" />
    <script src="./index.full.js"></script>

    <script>
      //适配代码
      (function (doc, win) {
        var docEI = doc.documentElement,
          resizeEvt = "orientationchange" in window ? "orientataionchange" : "resize",
          recalc = function () {
            var clientWidth = docEI.clientWidth;
            if (!clientWidth) return;
            //100是字体大小，1536是开发时浏览器窗口的宽度，等比计算
            docEI.style.fontSize = 100 * (clientWidth / 1536) + "px";
          };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener("DOMContentLoaded", recalc, false);
      })(document, window);
    </script>
    <style>
      * {
        /* margin: 0;
        padding: 0; */
        font-size: 0.15rem;
      }
    </style>
  </head>

  <body>
    <div id="app" class="table-content">
      <h3 style="font-size: 0.25rem">入场安全教育记录</h3>
      <div class="table-form">
        <el-form ref="dataForm" :model="entryEduForm" label-width="118px" class="dataForm">
          <el-row>
            <el-col :span="24">
              <el-row>
                <el-col :span="12" class="flex-center">
                  <img :src="entryEduForm.idPhoto" style="height: 2.2rem" alt="" />
                </el-col>
                <el-col :span="12">
                  <div style="border-left: 1px solid #000; height: 100%; padding: 10px">
                    <div style="display: flex; text-align: left; margin-bottom: 50px">
                      <div style="font-size: 16px; font-weight: 600; width: 60px">工种：</div>
                      <div>{{ entryEduForm.workTypeName }}</div>
                      <!-- <el-radio-group :inline="false" v-model="entryEduForm.type" @change="onInput($event,'type')">
                        <div>
                          <el-radio label="普工" value="1" />普工 <el-radio label="钢筋工" value="2" />钢筋工 <el-radio label="木工" value="3" />木工 <el-radio label="砼工" value="4" />砼工 <el-radio label="电工" value="5" />电工
                          <br />
                        </div>
                        <div><el-radio label="焊工" value="6" />焊工 <el-radio label="架子工" value="7" />架子工 <el-radio label="起重工" value="8" />起重工 <el-radio label="信号司索工" value="9" />信号司索工 <el-radio label="桩机工" value="10" />桩机工 <el-radio label="其他" value="11" />其他</div>
                      </el-radio-group> -->
                    </div>
                    <div style="display: flex; text-align: left; margin-bottom: 50px">
                      <span style="font-size: 16px; font-weight: 600">文化程度：</span>
                      <div>{{ entryEduForm.degreeEducationName }}</div>
                      <!-- <el-radio-group :inline="false" v-model="entryEduForm.deep" @change="onInput($event,'deep')">
                        <div>
                          <el-radio label="初中" value="1" />初中 <el-radio label="高中" value="2" />高中 <el-radio label="中专" value="3" />中专 <el-radio label="大专" value="4" />大专 <el-radio label="本科" value="5" />本科 <el-radio label="其他" value="6" />其他
                          <br />
                        </div>
                      </el-radio-group> -->
                    </div>
                    <!-- <div style="font-size: 16px; font-weight: 600; text-align: left" class="mb-20">说明：在符合项内画勾</div> -->
                    <div style="font-size: 16px; text-align: left">年龄： <el-input v-model="entryEduForm.age" class="width-100 border_bottom_1" placeholder=" "></el-input>周岁</div>
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <script>
      const { createApp, reactive, toRefs, ref, onMounted } = Vue;
      const vue3Composition = {
        setup() {
          const entryEduForm = ref({
            idPhoto: "", // 身份证正面
            workTypeName: "", // 工种
            degreeEducationName: "", // 文化程度
            age: "",
          });
          window.setSign = (event) => {
            entryEduForm.value[event.key] = event.img;
          };

          window.getData = (event) => {
            return entryEduForm.value;
          };
          window.setData = (data) => {
            entryEduForm.value.idPhoto = data.idCardFront;
            entryEduForm.value.age = data.age;
            entryEduForm.value.workTypeName = data?.workTypeName || "";
            entryEduForm.value.degreeEducationName = data?.degreeEducationName || "";
          };
          const onInput = (e, key) => {
            window.parent.postMessage(
              {
                key,
                isFill: e != "",
                form: "entryEduForm",
              },
              "*"
            );
          };
          //peopleForm.sign
          const setUpEquipment = (key, type) => {
            window.parent.childListener({
              key,
              type,
            });
          };
          return {
            entryEduForm,
            setUpEquipment,
            onInput,
          };
        },
      };
      const app = createApp(vue3Composition).use(ElementPlus).mount("#app");
    </script>
  </body>
</html>
